import Vue from 'vue'
import {
  SIDEBAR_TYPE,
  DEFAULT_THEME,
  DEFAULT_LAYOUT_MODE,
  DEFAULT_COLOR,
  DEFAULT_COLOR_WEAK,
  DEFAULT_FIXED_HEADER,
  DEFAULT_FIXED_SIDEMENU,
  DEFAULT_FIXED_HEADER_HIDDEN,
  DEFAULT_CONTENT_WIDTH_TYPE,
  DEFAULT_MULTI_PAGE
} from "../../store/mutation-types"

const app = {
  state: {
    // 侧边栏
    sidebar: {
      opened: true, // 是否打开
      withoutAnimation: false // 是否有动画
    },
    // 设备：桌面：desktop， 手机:mobile,  平板:flat
    device: 'desktop',
    // 主题
    theme: '',// dark, light 黑白
    // 布局 整体布局方式 ['sidemenu', 'topmenu'] 两种布局， 侧边菜单/顶部菜单
    layout: '',
    // 内容宽度
    contentWidth: '', // 内容宽度
    // 固定顶部头
    fixedHeader: false,
    // 固定侧边栏
    fixSiderbar: false,
    // 自动隐藏头
    autoHideHeader: false,
    // 颜色
    color: null,
    // 色弱模式
    weak: false,
    multipage: true, //默认多页签模式,
    // 系统名称
    systemName:'',
    // 系统简单名(手机模式)
    systemSimpleName: '',
    // 系统logo url或者地址
    systemLogo:'',
    systemLoginLogo:'',
  },
  mutations: {
    // 设置系统名称
    SET_SYSTEM_NAME:(state, systemName)=>{
      state.systemName = systemName;
    },
     // 设置系统名称
    SET_SYSTEM_SIMPLE_NAME:(state, systemSimpleName)=>{
      state.systemSimpleName = systemSimpleName;
    },
    // 设置系统Logo
    SET_SYSTEM_LOGO:(state, systemLogo)=>{
      state.systemLogo = systemLogo;
    },

    SET_SYSTEM_LOGIN_LOGO:(state, systemLoginLogo)=>{
      state.systemLoginLogo = systemLoginLogo;
    },
    SET_SIDEBAR_TYPE: (state, type) => {
      state.sidebar.opened = type;
      Vue.ls.set(SIDEBAR_TYPE, type)
    },
    CLOSE_SIDEBAR: (state, withoutAnimation) => {
      Vue.ls.set(SIDEBAR_TYPE, false)
      state.sidebar.opened = false
      state.sidebar.withoutAnimation = withoutAnimation
    },
    // 转换设备类型
    TOGGLE_DEVICE: (state, device) => {
      state.device = device
    },
    // 转换主题 设置为localStorege,一直使用
    TOGGLE_THEME: (state, theme) => {
      Vue.ls.set(DEFAULT_THEME, theme)
      state.theme = theme
    },
    // 设置布局模型 设置为localStorege,一直使用
    TOGGLE_LAYOUT_MODE: (state, layout) => {
      Vue.ls.set(DEFAULT_LAYOUT_MODE, layout)
      state.layout = layout
    },
     // 设置固定头部 设置为localStorege,一直使用
    TOGGLE_FIXED_HEADER: (state, fixed) => {
      Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
      state.fixedHeader = fixed
    },
     // 设置固定侧边栏 设置为localStorege,一直使用
    TOGGLE_FIXED_SIDERBAR: (state, fixed) => {
      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
      state.fixSiderbar = fixed
    },
     // 设置自动隐藏头部 设置为localStorege,一直使用
    TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
      Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
      state.autoHideHeader = show
    },
     // 设置内容宽度 设置为localStorege,一直使用
    TOGGLE_CONTENT_WIDTH: (state, type) => {
      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
      state.contentWidth = type
    },
     // 修改颜色 设置为localStorege,一直使用
    TOGGLE_COLOR: (state, color) => {
      Vue.ls.set(DEFAULT_COLOR, color)
      state.color = color
    },
    TOGGLE_WEAK: (state, flag) => {
      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
      state.weak = flag
    },
     // 设置是否多页签模式 设置为localStorege,一直使用
    SET_MULTI_PAGE (state, multipageFlag) {
      Vue.ls.set(DEFAULT_MULTI_PAGE, multipageFlag)
      state.multipage = multipageFlag
    },

  },
  actions: {
    setSidebar: ({ commit }, type) => {
      commit('SET_SIDEBAR_TYPE', type)
    },
    CloseSidebar({ commit }, { withoutAnimation }) {
      commit('CLOSE_SIDEBAR', withoutAnimation)
    },
    ToggleDevice({ commit }, device) {
      commit('TOGGLE_DEVICE', device)
    },
    ToggleTheme({ commit }, theme) {
      commit('TOGGLE_THEME', theme)
    },
    ToggleLayoutMode({ commit }, mode) {
      commit('TOGGLE_LAYOUT_MODE', mode)
    },
    ToggleFixedHeader({ commit }, fixedHeader) {
      if (!fixedHeader) {
        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
      }
      commit('TOGGLE_FIXED_HEADER', fixedHeader)
    },
    ToggleFixSiderbar({ commit }, fixSiderbar) {
      commit( 'TOGGLE_FIXED_SIDERBAR', fixSiderbar)
    },
    ToggleFixedHeaderHidden({ commit }, show) {
      commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
    },
    ToggleContentWidth({ commit }, type) {
      commit('TOGGLE_CONTENT_WIDTH', type)
    },
    ToggleColor({ commit }, color) {
      commit('TOGGLE_COLOR', color)
    },
    ToggleWeak({ commit }, weakFlag) {
      commit('TOGGLE_WEAK', weakFlag)
    },
    ToggleMultipage({ commit }, multipageFlag) {
      commit('SET_MULTI_PAGE', multipageFlag)
    }
  }
};

export default app